//Declaração de variáveis
var $img = $('.slideshow img');
var $button = $('.botao img');
var slideLength = $img.length;
var fadeTime = 1000;
var imgInterval = 5000;
var delayTime = 9000;
var currentImg = 0;
var slideshow;

//Função responsável pela animação do slideshow
function animacao(){
	$img.eq(currentImg).fadeOut(fadeTime); //Desaparece com a imagem atual
	$button.eq(currentImg).removeClass('ativado').addClass('parado'); //Desativa o botão selecionado
	currentImg++; //Incrementa o contador dos índices das imagens
	if(currentImg === slideLength){ //Condição para loop do slideshow
		currentImg = 0;
	}
	$img.eq(currentImg).fadeIn(fadeTime); //Aparece a imagem seguinte
	$button.eq(currentImg).removeClass('parado').addClass('ativado'); //Ativa o novo botão
	slideshow  = setTimeout(animacao, imgInterval); //Recurssão para manter o processo em loop infinito de intervalos de 5s
}

//Ação para mudar para a imagem equivalente quando clickar em qualquer botão
$button.click(function(){
	clearTimeout(slideshow); //Para a animação
	$img.eq(currentImg).fadeOut(fadeTime); 
	$button.eq(currentImg).removeClass('ativado').addClass('parado');
	currentImg = $button.index(this); //Pega o índice do elemento clickado 
	$img.eq(currentImg).fadeIn(fadeTime); //Aparece com a imagem correspondente
	$button.eq(currentImg).removeClass('parado').addClass('ativado'); //Ativa o novo botão clickado
	slideshow = setTimeout(animacao, delayTime); //Reinicia o slideshow após 9s
});

$img.eq(currentImg).fadeIn(fadeTime); //Inicia trazendo a primeira imagem
slideshow = setTimeout(animacao, imgInterval); //Chamada da função que dá início ao slideshow
